<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"  
                xmlns:h="http://java.sun.com/jsf/html">
    <style type="text/css">
        .miTabla ul.ui-picklist-target li:first-child{
            background-color:#bce8f1;
        }
        .miTabla ul.ui-picklist-target li.ui-state-hover:first-child{
            background:#bce8f1 !important;
        }
        .miTabla ul.ui-picklist-target li.ui-state-highlight:first-child{
            background:#bce8f1 !important;
        }
    </style>
    <h:form id="frmAsignarInstancia" onkeypress="if (event.keyCode == 13) return false;">
        <p:panel rendered="#{usuarioController.selectedUsuario != null}">
            <table style="width:100%;" >
                <thead>
                    <tr>
                        <td>
                            <table width="100%" cellpadding="5" cellspacing="8" style="width: 380px;">
                                <tr>
                                    <td style="width: 100px;"><h:outputText value="Usuario :"/> </td>
                                    <td>
                                        <p:inputText value="#{usuarioController.bean.txtNombres} #{usuarioController.bean.txtApellidoPaterno} #{usuarioController.bean.txtApellidoMaterno}" 
                                                     style="width: 300px;" disabled="true" styleClass="disabled">
                                        </p:inputText>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </thead>  
                <tbody>
                    <tr>
                        <td>
                            <h:panelGrid id="panInstanciasTmp" style="width: 440px;">
                                <p:pickList styleClass="miTabla" id="pickList" value="#{usuarioController.instancias}" var="instanciaUsu" 
                                            itemLabel="#{instanciaUsu.txtInstancia}" itemValue="#{instanciaUsu.id}" 
                                            moveUpLabel="Subir" moveTopLabel="Subir Al Superior"
                                            addAllLabel="Agregar Todos" addLabel="Agregar" removeLabel="Quitar" removeAllLabel="Quitar Todos"
                                            converter="#{instanciaUsu}" showTargetControls="true">
                                    <f:facet name="sourceCaption">Instancias Disponibles</f:facet>  
                                    <f:facet name="targetCaption">Instancias Asignadas</f:facet>
                                    <p:column style="width:100%">#{instanciaUsu.txtInstancia}</p:column>
                                </p:pickList>
                            </h:panelGrid>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table>
                                <tr>
                                    <td style="vertical-align: top;"><span class="ui-icon ui-icon-info mensajeIcon" ></span></td>
                                    <td style="vertical-align: top;">El primer registro indica la instancia principal.</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
        </p:panel>
        <p:toolbar>
            <p:toolbarGroup align="right">
                <p:commandButton icon="ui-icon-disk" value="Grabar" style="margin-right: 40px;" 
                                 actionListener="#{usuarioController.guardarUsuarioInstancia()}"
                                 update=":frmAsignarInstancia:msjConfigInstancias, :frmAsignarInstancia:panInstanciasTmp" />
                <p:commandButton icon="ui-icon-close" value="Cerrar" process="@this" oncomplete="asignaInstancias.hide()"/>
            </p:toolbarGroup>
        </p:toolbar>
        <p:messages id="msjConfigInstancias" showDetail="true" showSummary="false"/>
    </h:form>
</ui:composition>